﻿<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/font-awesome.min.css" rel="stylesheet" />
    <link href="../css/style.min.css" rel="stylesheet" />
    <link href="../css/base.css" rel="stylesheet" />
    <link href="../css/comm.css" rel="stylesheet" />
    <link href="../css/makePlan.css" rel="stylesheet" />
  <%--  <link href="../css/bootstrap-tables/bootstrap-table.min.css" rel="stylesheet" />--%>
    <link href="../css/dataTables/jquery.dataTables.min.css" rel="stylesheet" />

    <style>
    .tb-head-container{
	    padding: 5px 0 0 0;
    }
    #tbc .pic{
	    width: 40px;
	    height: 40px;
	    margin: 2px auto;
    }
    #thc span,
    #tbc span{
	    display:inline-block; 
    }
    .condition{
	    padding-top: 5px;
    }
    .system-box{
        padding-left:15px;
    }
    </style>
</head>
<body>
   <div class="system-box">
        <div class="row">筛选条件</div>
	<div class="row clearfix">
       
		<div class="condition">
            <label>供应商</label>
			<select class="form-control input-w160" id="search-vent">
				<option value="">请选择</option>
			</select>
			<label>省份</label>
			<select class="form-control input-w160" id="search-province">
				<option value="">请选择</option>
			</select>
           <label>销售时间</label>
				<input type="text" class="form-control layer-date input-w170" id="search-start" readonly="readonly" placeholder="开始时间" />
            <label>至</label>
            <input type="text" class="form-control layer-date input-w170" id="search-end" readonly="readonly" placeholder="结束时间" />
		</div>
        <div class="condition">
            <label>年份</label>
			<select class="form-control input-w160" id="search-year">
				<option value="">请选择</option>
			</select>
			<label>季节</label>
			<select class="form-control input-w160" id="search-serson">
				<option value="">请选择</option>
			</select>
            <label>系列</label>
			<select class="form-control input-w160" id="search-series">
				<option value="">请选择</option>
			</select>
            <label>品类</label>
			<select class="form-control input-w160" id="search-model">
				<option value="">请选择</option>
			</select>
			<label>货号</label>
			<input type="text" class="form-control input-w170" placeholder="多个货号以','隔开." id="search-keys" /><a id="btn-search" class="btn-primary">查 询</a>
        </div>
	</div>
       <div class="row">分仓及店仓明细(点击"+"看店仓明细)</div>
      
	    <div class="row clearfix">
			      <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">销售汇总</a>
                            </li>
                            <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">销售明细</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="panel-body">
                                    <table id="total-table" width="100%" border="0" cellspacing="0" cellpadding="0">
                                      <thead>
                                        <tr>
                                             <th></th>
                                          <td>货号</td>
                                              <td>供应商</td>
                                              <td>范围</td>
                                              <td>售罄率</td>
                                              <td>销售金额</td>
                                              <td>销售数量</td>
                                              <td>成本价</td>
                                          <td>当前仓存</td>
                                          <td>当前店存</td>
                                        </tr>
                                        <%--  <tr>
                                                <table id="total-p-table" width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-left:30px;">
                                                      <tr>
                                                          <td>省份</td>
                                                              <td>仓库/店铺</td>
                                                              <td>售罄率</td>
                                                              <td>销售金额</td>
                                                              <td>销售数量</td>
                                                          <td>当前库存</td>
                                                        </tr>
                                                </table>
                                          </tr>--%>
                                      </thead>
                                    </table>
                                  
                                 </div>
                            </div>
                            <div id="tab-2" class="tab-pane">
                                <div class="panel-body">
                                  <table id="detail-table"></table>
                                </div>
                            </div>
                        </div>
	        </div>
        </div>
     </div>
    <script src="../js/jquery-2.1.1.min.js"></script>
    <script src="../js/layer.js"></script>
    <script src="../js/laydate.js"></script>
 <%--   <script src="../js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>--%>
    <script src="../js/jquery.dataTables.min.js"></script>
    <script>
        $(function () {
            //初始化日期控件
            var start = {
                elem: "#search-start",
                format: "YYYY-MM-DD",
                min: "2015-12-01",
                max: "2099-12-01",
                istime: false,
                istoday: true,
            };
            $('#search-start').val(laydate.now(-30, 'YYYY-MM-DD'));
            laydate(start);
            var end = {
                elem: "#search-end",
                format: "YYYY-MM-DD",
                min: "2015-12-01",
                max: "2099-12-01",
                istime: false,
                istoday: true,
            };
            $('#search-end').val(laydate.now(-1, 'YYYY-MM-DD'));
            laydate(end);

            //初始化条件
            initCondition();
            //1.初始化Table
           
            ////2.初始化Button的点击事件
            //var oButtonInit = new ButtonInit();
            //oButtonInit.Init();
            //当点击查询按钮的时候执行  
            $("#btn-search").on("click", function () {
                //var province = $('#search-province option:selected').val();
                //var year = $('#search-year option:selected').val();
                //var season = $('#search-serson option:selected').val();
                //var series = $('#search-series option:selected').val();
                //var model = $('#search-model option:selected').val();
                //var querybtnData = {
                //    "action": "GetVendCustSalesReport",//?action=GetVendCustSalesReport
                //    "vendCustID": '1',//$('#serarch-vent option:selected').val();
                //    "operationAreaID": province, //省份
                //    "startDate": $('#search-start').val(), //启始时间
                //    "endDate": $('#search-end').val(), //to时间
                //    "periodYear": year, //年份
                //    "seasonID": season, //季节
                //    "seriesID": series, //系列
                //    "modelID": model, //品类
                //    "materialID": $('#search-keys').val() || '',
                //    page: 1,
                //    size: 10,
                //    UserID: localStorage.getItem("UserID")
                //}

                //$.post("VendCustHandler.ashx", querybtnData, function (data) {
                //    console.log(data);
                //});
                var userId = localStorage.getItem("UserID");
                if (userId == "" || userId == null || userId == undefined) return false;
                //var oTable = new TableInit();
                //oTable.Init();
                initTable();
            });


          

        })

        var initCondition = function () {
            $.post("VendCustHandler.ashx", {
                "action": "GetCondition",
                "UserID": localStorage.getItem("UserID")
            }, function (data) {
                if (data.Success == true) {
                    var d = data.Data;
                    if (d != null || d != undefined) {

                        //品类
                        var model = d.MatModelList;
                        if (model != null) {
                            var serarchcate = $("#search-model");
                            var sHtml = "";
                            model.map(function (item, i) {
                                sHtml += '<option value=' + item.ModelId + '>' + item.ModelName + '</option>';
                            });
                            serarchcate.append(sHtml);
                        }
                        //系列
                        var Series = d.MatSeriesList;
                        if (Series != null) {
                            var serarchSeries = $("#search-series");
                            var sHtml = "";
                            Series.map(function (item, i) {
                                sHtml += '<option value=' + item.SeriesID + '>' + item.SeriesName + '</option>';
                            });
                            serarchSeries.append(sHtml);
                        }

                        //年份
                        var year = d.PeriodYearList;
                        if (year != null) {
                            var serarchYear = $("#search-year");
                            var sHtml = "";
                            year.map(function (item, i) {
                                sHtml += '<option value=' + item.PeriodYear + '>' + item.PeriodYear + '</option>';
                            });
                            serarchYear.append(sHtml);
                        }

                        //季节
                        var season = d.MatSeasonList;
                        if (season != null) {
                            var serarchseason = $("#search-serson");
                            var sHtml = "";
                            season.map(function (item, i) {
                                sHtml += '<option value=' + item.SeasonID + '>' + item.SeasonName + '</option>';
                            });
                            serarchseason.append(sHtml);
                        }

                        //省份
                        var operationArea = d.OperationAreaList;
                        if (operationArea != null) {
                            var serarchprovince = $("#search-province");
                            var sHtml = "";
                            operationArea.map(function (item, i) {
                                sHtml += '<option value=' + item.OperationAreaID + '>' + item.OperationAreaName + '</option>';
                            });
                            serarchprovince.append(sHtml);
                        }
                        //供应商
                        var vend = d.VendCustList;
                        if (vend != null) {
                            var serarchvent = $("#search-vent");
                            var sHtml = "";
                            vend.map(function (item, i) {
                                sHtml += '<option value=' + item.VendCustID + '>' + item.VendCustName + '</option>';
                            });
                            serarchvent.append(sHtml);
                        }
                    }
                }
            });
        };

        var parentTable;
        var initTable = function () {
            parentTable=$('#total-table').DataTable({
                fixedHeader: true,
                pagingType: "full",
                processing: true,
                deferRender: true,
                searching: false,
                search:{
                    "smart": false
                },
                dom: "Bfrtip",
                info: false,
                buttons: [],
                responsive: !0,
                serverSide: true,
                ordering: false,
                //lengthMenu: [[20, 25, 50, -1], [20, 25, 50, "All"]],
                ajax: function (data, callback, settings) {
                    var province = $('#search-province option:selected').val();
                    var year = $('#search-year option:selected').val();
                    var season = $('#search-serson option:selected').val();
                    var series = $('#search-series option:selected').val();
                    var model = $('#search-model option:selected').val();
                    var vend = $('#search-vent option:selected').val();

                    var querybtnData = {
                        "action": "GetVendCustSalesReport",//?action=GetVendCustSalesReport
                        "vendCustID": vend,//$('#serarch-vent option:selected').val();
                        "operationAreaID": province, //省份
                        "startDate": $('#search-start').val(), //启始时间
                        "endDate": $('#search-end').val(), //to时间
                        "periodYear": year, //年份
                        "seasonID": season, //季节
                        "seriesID": series, //系列
                        "modelID": model, //品类
                        "materialID": $('#search-keys').val() || '',
                        page: 1,
                        size: 100
                       // UserID: localStorage.getItem("UserID")
                    }
                    $.post('VendCustHandler.ashx', querybtnData, function (data) {
                        var returnData = {};

                        console.log(data);

                        if (data.Data.resultTotalList == null || data.Data.resultTotalList == "") {
                            returnData.draw = data.draw;
                            returnData.recordsTotal = 0;
                            returnData.recordsFiltered = 0;
                            returnData.data = [];
                        }
                        else {
                            returnData.draw = data.draw;
                            returnData.recordsTotal = data.RecordCount;
                            returnData.recordsFiltered = data.RecordCount;
                            returnData.data = data.Data.resultTotalList;
                        }

                        callback(returnData);
                    })

                },
                "columnDefs": [
                  {
                      "targets": [0], // 目标列位置，下标从0开始
                      "data": null, // 数据列名
                      "render": function (data, type, full) { // 返回自定义内容
                          return "<td><span class='expander' style='cursor:pointer' onclick='showChild()'>+</span></td>";
                      }
                  }],
                "columns": [
                    { data: "" },
                    { data: "MaterialID" },
                    { data: "VendCustName" },
                    { data: "DataText" },
                    { data: "SaleRate" },
                    { data: "SaleAmount" },
                    { data: "SaleQty" },
                       { data: "CostPrice" },
                        { data: "StockQty" },
                        { data: "ShopQty" }
                ]
              
            });
         
        };
        var showChild = function () {
            var row = parentTable.row($(this).closest("tr"));

            if (row.child() == undefined) {
                $(this).html("-");
                var $table = $("<table><thead><tr><th>InnerV1</th><th>InnerV2</th><th>InnerV3</th><th>InnerV4</th></tr></thead><tbody><tr><td>foo</td><td>bar</td><td>biz</td><td>baz</td></tr><tr><td>baz</td><td>biz</td><td>bar</td><td>foo</td></tr><tr><td>bar</td><td>foo</td><td>baz</td><td>biz</td></tr></tbody></table>");
                $table.attr("id", "childTable_" + row.index());
                var childTable = $table.DataTable({
                    order: [0, "desc"],
                    columnDefs: [{
                        sortable: false,
                        targets: [1, 2]
                    }]
                });

                row.child(childTable.table().container());
                row.child.show();
            } else {
                $(this).html("+");
                row.child(false);
            }
        };


    </script>
</body>
</html>
